<template>
  <div class="order">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-input placeholder="请输入内容" v-model="searchVal" class="search-input">
       <el-button slot="append" icon="el-icon-search"  @click='initList'></el-button>
    </el-input>
    <el-button type="primary" plain >订单测试</el-button>
    <!-- 订单表格 -->
     <el-table
      class="mt-15 mb-15"
      :data="ordertList"
      border
      stripe
      style="width: 100%">
      <el-table-column
        label="#"
        type="index"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="order_number"
        label="订单编号"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="order_price"
        label="订单价格"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="order_id"
        label="下单用户"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="order_pay"
        label="是否付款"
        width="auto">
      </el-table-column>
      <el-table-column
        prop="is_send"
        label="是否发货"
        width="auto">
      </el-table-column>
      <el-table-column
        label="下单时间"
        width="auto">
        <template slot-scope="scope">
          {{scope.row.create_time |  fmtTime('-')}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button size="small" icon="el-icon-edit" plain type="primary"></el-button>
          <el-button size="small" icon="el-icon-location-outline" plain type="warning"></el-button>
        </template>
      </el-table-column>
    </el-table>
  <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {getOrderList,editOrderList} from '@/api'
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize:10,
        totalNum:0,
        searchVal: "",
        ordertList: [
          {
            order_id: 47,
            user_id: 133,
            order_number: "itcast-59e7502d7993d",
            order_price: 322,
            order_pay: "1",
            is_send: "是",
            trade_no: "",
            order_fapiao_title: "个人",
            order_fapiao_company: "",
            order_fapiao_content: "办公用品",
            consignee_addr:
              'a:7:{s:6:"cgn_id";i:1;s:7:"user_id";i:133;s:8:"cgn_name";s:9:"王二柱";s:11:"cgn_address";s:51:"北京市海淀区苏州街长远天地大厦305室";s:7:"cgn_tel";s:11:"13566771298";s:8:"cgn_code";s:6:"306810";s:11:"delete_time";N;}',
            pay_status: "1",
            create_time: 1508331565,
            update_time: 1508331565
          }
        ]
      };
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.initList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.initList();
      },
      // 初始化列表
      initList(){
        getOrderList({
          query:this.searchVal,
          pagenum:this.currentPage,
          pagesize:this.pageSize
        }).then(res=>{
          console.log(res)
          if(res.meta.status===200){
            this.totalNum=res.data.total;
            this.ordertList=res.data.goods
          }
        })
      }
    },
    created(){
      this.initList()
    },
    filters:{
      fmtTime(val,sep){
        console.log(val)
        val=new Date(val)
        var y=val.getFullYear()
        var m=val.getMonth()+1
        var d=val.getDate()
        return y+sep+m+sep+d;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .order {
    .search-input {
      width: 300px;
    }
  }
</style>
